<template>
	<view class="myOrder">
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in nav" :key="index" @click="selStatus(item.status)">
				<!-- <text :class="index==0?'nav_sel nav_name':'nav_name'">{{item}}</text> -->
				<view :class="item.status == selindex ? 'nav_name hover' : 'nav_name'">
					<text>{{ item.name }}</text>
				</view>
			</view>

		</view>
		<view class="main">
			<view class="content" v-for="(item,index) in pageResult.list" :key="index" v-if="pageResult.list.length > 0">
				<view class="top"  @click="jump('order_view', item.id)">
					<view class="state">
						<text>{{item.type_name}}:{{item.order_sn}}</text>
						<text>{{item.status_name}}</text>
					</view>
					<view class="item" v-for="(product,index2) in item.productList" :key="index2">
						<image :src="product.product_picture" mode="aspectFill"></image>
						<view class="right">
							<text>{{product.product_name}}</text>
							<text style="color: rgba(200, 0, 0, 1);" v-if="product.sku_delivery_date != ''">{{product.sku_delivery_date}}</text>
							<text>{{product.sku_name}}</text>
							<text class="showPrice">{{product.price > 0 ? '￥'+product.price : ''}}{{product.price > 0 && product.point_exchange > 0 ? ' + ' : ''}}{{product.point_exchange > 0 ? product.point_exchange+'豆力' : ''}}</text>
							<text class="num">x{{product.num}}</text>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="bot_pic"  @click="jump('order_view', item.id)">
						<text>
							共{{item.product_count}}件商品 总计：
						</text>
						<text>
							{{'￥'+item.total_money}}
						</text>
					</view>
					<view class="bot_state">
						<text v-for="(button,index3) in item.buttonList" :key="index3" @click="operate(button.type, index)" class="sel">
							{{button.name}}
						</text>
					</view>
				</view>
			</view>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image :src="obtainImgUrl('icon/noItem.png')" mode="widthFix"></image>
				<text>暂未找到记录～</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" :src="obtainImgUrl('icon/close.png')" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>{{payInfo.pay_money}}</text>
				</view>
				<view class="line2" v-if="payInfo.user_money > 0" @click="selUseMoney()">
					<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
					<view :class="payInfo.isUseMoney ?'sel':'nosel'"></view>
				</view>
				<view class="line2" v-if="payInfo.pay_money > 0">
					<text>在线微信支付</text>
					<image :src="obtainImgUrl('icon/icon37.png')" mode="aspectFill"></image>
				</view>
				<view class="pay_bot" @click="subPay()">确认支付</view>
			</view>
		</uni-popup>
		<uni-popup ref="selAddress" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" :src="obtainImgUrl('icon/close.png')" mode="aspectFill"></image>
				<view class="title">修改收货地址</view>
				<view class="line2" style="justify-content: unset;align-items: center;"  v-for="(address,index) in addressList" :key="index" @click="selAddress(address.id)">
					<view :class="nowAddressId == address.id ?'sel':'nosel'"></view>
					<text style="margin-left: 20rpx;width: 85%;">{{address.realname}} {{address.mobile}} {{address.address_name}} {{address.address_details}}</text>
				</view>
				<view class="addAddressBtn" @click="jump('addOreditAddress', 'id=0')">+ 新增其他地址</view>
				<view class="pay_bot" @click="subAddress()">确认修改</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				list: [{}, {}, {}, {}],
				nav: [
					{'status' : 9,  'name': "全部"},
					{'status' : 0,  'name': "待付款"},
					{'status' : 1,  'name': "待发货"},
					{'status' : 3,  'name': "待收货"},
					{'status' : 4,  'name': "已完成"},
					{'status' : -4,  'name': "已取消"},
				],
				addressList: [],
				nowAddressId: 0,
				selindex: 9,
				sel_pay_key: 0,
				pay_id : 0,
				payInfo: {
					id : 0,
					type: '',
					pay_money: 0,
					isUseMoney: 0,
					totalMoney: 0,
					user_money: 0,
				},
				pageParam: {
					synthesize_status: 9,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			numFilter(value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
			selAddress(id) {
				this.nowAddressId = id;
				this.$forceUpdate();
			},
			getAddressList() {
				serve.request({
					url: '/member/address/index',
					data:{}
				}).then(res => {
					this.addressList = res.data;
					if(res.data) {
						this.nowAddressId = res.data[0].id;
					}
				});
			},
			getList() {
				var self = this;
				self.pageParam.page++
				serve.request({
					url: '/member/order/index',
					data: self.pageParam
				}).then(res => {
					if (res.data && res.data.length > 0) {
						self.pageResult.list=self.pageResult.list.concat(res.data);
					}
					self.pageResult.isEmpty = self.pageResult.list.length == 0;
					self.pageResult.isEnd = res.data.length == 0; 
				});
				self.getAddressList();
			},
			selStatus(status) {
				this.selindex = status;
				this.pageParam.synthesize_status = status;
				this.pageParam.page=0;
				this.pageResult.list=[];
				this.getList();
			},
			operate(operateType, key) {
				var self = this;
				let operateId = self.pageResult.list[key].id;
				if(operateType == 'order_cancel') {
					uni.showModal({
					    title: '提示',
					    content: '您确定取消该订单吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order/close',
									data:{
										id:operateId,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none'
									});
									if(res.code == 200) {
										if(self.selindex == 9){
											self.pageResult.list[key].status_name = "已取消";
											self.pageResult.list[key].button_list = [];
										} else {
											self.pageResult.list.splice(key,1);
										}
										self.$forceUpdate();
									} 
								});
					        } 
					    }
					});
					return ;
				} else if(operateType == 'order_pay'){
					self.sel_pay_key = key;
					serve.request({
						url: '/member/order/pay-info',
						data:{
							id:operateId,
						}
					}).then(res => {
						self.payInfo.id = res.data.id;
						self.payInfo.type = res.data.type;
						self.payInfo.isUseMoney = 0;
						self.payInfo.totalMoney = res.data.totalMoney;
						self.payInfo.pay_money = res.data.totalMoney;
						self.payInfo.user_money = res.data.userMoney;
						self.$refs.popup.open();
					});
					return ;
				} else if(operateType == 'take_delivery'){
					uni.showModal({
					    title: '提示',
					    content: '您确定该订单已确定收货吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order/take-delivery',
									data:{
										id:operateId,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none'
									});
									if(res.code == 200) {
										if(self.selindex == 9){
											self.pageResult.list[key].status_name = "已完成";
											self.pageResult.list[key].button_list = [
												{'type': 'select_delivery', 'name' : '物流查询'},
											];
										} else {
											self.pageResult.list.splice(key,1);
										}
										self.$forceUpdate();
									} 
								});
					        } 
					    }
					});
					return ;
				} else if (operateType == 'select_delivery') {
					uni.navigateTo({
					    url: '/pages/my/logisticsInformation?id='+operateId
					});
					return ;
				} else if (operateType == 'tip_delivery') {
					serve.request({
						url: '/member/order/tip-delivery',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id:operateId,
						}
					}).then(res => {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
						if(res.code == 200) {
							self.pageResult.list[key].button_list = [];
						}
					});
				} else if (operateType == 'edit_address') {
					self.sel_pay_key = key;
					self.$refs.selAddress.open();
				} else if (operateType == 'again_buyer') {
					self.jump('addOrder', 'type=again_buyer&data={"order_id":"'+operateId+'"}');
				} else if (operateType == 'evaluate_order') {
					self.jump('evaluate_order', operateId);
				}  else if (operateType == 'cardList') {
					self.jump(operateType, 'state=1');
				}
			},
			close() {
				this.$refs.selAddress.close();
				this.$refs.popup.close();
			},
			selUseMoney() {
				this.payInfo.pay_money = JSON.parse(JSON.stringify(this.payInfo.totalMoney));
				this.payInfo.isUseMoney = this.payInfo.isUseMoney == 1 ? 0 : 1;
				if(this.payInfo.isUseMoney) {
					this.payInfo.pay_money = this.numFilter(Number(this.payInfo.pay_money) - Number(this.payInfo.user_money));
				}
				this.payInfo.pay_money = this.payInfo.pay_money > 0 ? this.payInfo.pay_money : 0;
			},
			subPay() {
				var self = this;
				serve.request({
					url: '/store/pay/wechat',
					data: self.payInfo,
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
						return ;
					}
					let payConfig = res.data;
					if(!payConfig.isGoPay) {
						let key = self.sel_pay_key;
						if(self.selindex == 9){
							self.pageResult.list[key].status_name = "待发货";
							self.pageResult.list[key].button_list = [
								{'type': 'tip_delivery', 'name' : '提醒发货'},
							];
						} else {
							self.pageResult.list.splice(key,1);
						}
						self.$forceUpdate();
						self.$refs.popup.close();
						return ;
					}
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payConfig.timeStamp,
						nonceStr: payConfig.nonceStr,
						package: payConfig.package,
						signType: payConfig.signType,
						paySign: payConfig.paySign,
						success: function (res) {
							self.queryPayResult(payConfig.payId);
							// self.paySuccess(self.pay_id, 'wechat');
							return ;
						},
						fail: function (err) {
							uni.showToast({
								title: '放弃支付',
								icon: 'none'
							});
							// self.paySuccess(self.pay_id, 'wechat');
							return ;
						}
					})
				});
				return ;
			},
			subAddress() {
				let key = this.sel_pay_key;
				let operateId =  this.pageResult.list[key].id;
				if(this.nowAddressId == 0) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
					return;
				}
				serve.request({
					url: '/member/order/edit-address',
					data:{
						id:operateId,
						address_id: this.nowAddressId
					}
				}).then(res => {
					uni.showToast({
						title:res.message,
						icon: 'none'
					});
					this.close();
					return ;
				});
			},
			paySuccess(operateId, payType) {
				var self = this;
				serve.request({
					url: '/order/order/pay',
					data:{
						order_id:operateId,
						pay_type: payType
					}
				}).then(res => {
					uni.showToast({
						title:res.message,
						icon: 'none'
					});
					if(res.code == 200) {
						let key = self.sel_pay_key;
						if(self.selindex == 9){
							self.pageResult.list[key].status_name = "待发货";
							self.pageResult.list[key].button_list = [];
						} else {
							self.pageResult.list.splice(key,1);
						}
						self.$forceUpdate();
						self.$refs.popup.close();
					} 
					return ;
				});
				return ;
			},
			queryPayResult(payId) {
				uni.showLoading({
					title: '查询中···',
					mask: true
				});
				var self = this;
				setTimeout(function() {
					serve.request({
						url: '/payservice/query-pay',
						data:{
							payId: payId,
						}
					}).then(res => {
                        uni.hideLoading();
						if(res.data.payStatus == 1) {
							let key = self.sel_pay_key;
							if(self.selindex == 9){
								self.pageResult.list[key].status_name = "待发货";
								self.pageResult.list[key].button_list = [];
							} else {
								self.pageResult.list.splice(key,1);
							}
							self.$forceUpdate();
							self.$refs.popup.close();
							// self.jump('success', 'type=pay_order&id='+res.data.dataId);
						} else {
							self.queryPayResult(payId);
						}
					});
				}, 1500);
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.selindex = options.synthesize_status || 9;
			this.pageParam.synthesize_status = options.synthesize_status || 9;
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.myOrder {
		.nav {
			display: flex;
			position: fixed;
			width: 100%;
			// top: 88upx;
			height: 100upx;
			background: #FFFFFF;
			z-index: 200;
			align-items: center;
			border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;

			.nav_item {
				width: 20%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;

				.hover {
					border-bottom: 8upx rgba(251, 202, 63, 1) solid;
					color: rgba(35, 52, 91, 1);
					font-weight: bold;
				}

				.scroll-item {
					padding: 0upx 10upx;
					display: inline-flex;
					height: 28upx;
					font-size: 28upx;
				}

				.nav_name {
					padding: 0upx 10upx;
					display: inline-flex;
					height: 90upx;
					font-size: 28upx;
				}
			}
		}

		.main {
			padding-top: 100upx;

			.content {
				box-sizing: border-box;
				border-bottom: 16upx #F7F7FA solid;

				.top {
					box-sizing: border-box;
					padding-left: 30upx;
					border-bottom: 1upx #EBECF0 solid;

					.state {
						display: flex;
						font-size: 28upx;
						height: 96upx;
						align-items: center;
						justify-content: space-between;
						color: rgba(57, 72, 107, 0.5);
						padding-right: 30upx;
						box-sizing: border-box;
						border-bottom: 1upx rgba(204, 204, 204, 0.5) solid;

						text:last-child {
							color: #FBCA3F;
							font-weight: bold;
						}
					}

					.item {
						display: flex;
						align-items: center;
						padding: 32upx 27upx 32upx 0upx;
						box-sizing: border-box;

						image {
							width: 170upx;
							height: 170upx;
							margin-right: 16upx;
							border-radius: 3%;
						}

						.right {
							width: 510upx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							font-size: 32upx;
							position: relative;

							.showPrice {
								font-size: 24upx;
								color: #FFC600;
								margin-top: 20upx;
							}

							text:first-child {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}

							.num {
								position: absolute;
								bottom: 0upx;
								right: 0upx;
								font-size: 28upx;
								color: rgba(60, 72, 104, 0.5);

							}
						}
					}
				}

				.bot {
					padding-right: 30upx;

					.bot_pic {
						padding: 30upx 0upx;
						font-size: 28upx;
						width: 100%;
						display: flex;
						justify-content: flex-end;

						text:last-child {
							color: #FBCA3F;
							font-weight: bold;
						}
					}

					.bot_state {
						display: flex;
						justify-content: flex-end;

						text {
							width: 200upx;
							height: 68upx;
							line-height: 68upx;
							text-align: center;
							border-radius: 34upx;
							font-size: 24upx;
							font-weight: bold;
							margin-left: 16upx;
							margin-bottom: 40upx;
							letter-spacing: 4rpx;
						}

						.sel:nth-child(3n+1) {
							background: #fbca3f;
							border: 1upx solid #fbca3f;
							color: #FFFFFF;
						}
						.sel:nth-child(3n+2) {
							background: #ff5500;
							border: 1upx solid #ff5500;
							color: #FFFFFF;
						}
						.sel:nth-child(3n) {
							background: #5555ff;
							border: 1upx solid #5555ff;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		.pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 26upx;
				text:last-child{
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				
				.nosel {
				    width: 36upx;
				    height: 36upx;
				    border: 1upx solid rgba(60, 72, 104, 1);
				    border-radius: 50%;
				}
				
				.sel {
				    background-image: url(../../static/img/check.png);
				    background-repeat: no-repeat;
				    width: 40upx;
				    height: 40upx;
				    background-size: 100%;
				}
				image{
					width: 40upx;
					height: 40upx;
				}
			}
			.addAddressBtn {
				width: 300rpx;
				text-align: center;
				margin: 0px 25%;
				border: 1px solid #f60;
				background: #f60;
				color: #fff;
				padding: 20rpx 0;
				border-radius: 20rpx;
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: rgba(255, 200, 10, 1);
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:124upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
	}
</style>
